 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>exam_be2  PC端</title>
 </head>
 <style>
  .abtn {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    background-color:tomato;
    border-radius: 5px;
    padding: 7px 7px;
    cursor: pointer;
  }

  .bg {
    background-color: rgb(218, 248, 247);
  }
  img {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 60%;
    top:30%
  }
</style>

 <body>
   <div id="app">
     <table>
       <tr>
         <th>序号</th>
         <th>编号</th>
         <th>名称</th>
         <th>单价</th>
         <th>库存</th>
         <th>小计</th>
         <th>操作</th>
       </tr>

       <tr v-for="(p,index) in products" v-bind:class="{bg: index%2 === 0}">
        <td>{{index+1}}</td>
        <td>{{p.id}}</td>
        <td>{{p.title}}</td>
        <td>{{p.price | currency}}</td>
        <td>
          <a @click="p.qty<=0?0:(p.qty-=1)" class="abtn">-</a>
          <input v-model="p.qty" @keyup="p.qty<0?0:p.qty" type="number"/>
          <a @click="p.qty<=0?0:(p.qty+=1)" class="abtn">+</a>
        </td>
        <td>{{p.price*p.qty | currency(1)}}</td>
        <td>
          <a @click="remove(index,p)">删除</a>
          <a @click="edit(index,p)">编辑</a>
        </td>
        
        <tr>
          <td colspan="7" align="right">
            {{total | currency}}
          </td>
        </tr>

       </tr>
     </table>

     <form id="productForm" name="productForm">
       <fieldset>
         <legend>商品详情</legend>
         <p>
           <label>编号：</label>
           <input type="number" v-model="productModel.id" :disabled="isAdd==false?true:false"/>
         </p>
         <p>
          <label>名称:</label>
          <input type="text"  v-model="productModel.title"/>
        </p>
        <p>
          <label>单价:</label>
          <input type="number" v-model="productModel.price" />
        </p>
        <p>
          <label>库存:</label>
          <input type="number" v-model="productModel.qty" />
        </p>
        <p>
          <label>简介:</label>
          <textarea v-model="productModel.description" cols="100" rows="5"></textarea>
        </p>
 
        <!-- <p><img :src="'../lib/images/'+productModel.id+'.gif'" /></p> -->
        <p>
          <!-- 直接写button标签有submit表单的效果 -->
          <input type="button" value="保存" @click="save"/>
          <input type="button" value="清空" @click="clear"/>
        </p>
      </fieldset>
    </form>
  </div>

  <script src="../lib/js/vue.js"></script>
  <script src="../lib/js/jquery.js"></script>

  <script>
    Vue.filter("currency",function(v,n){
      if(!v)return ''
      return "￥" +parseFloat(v).toFixed(n || 2)
    })

    let vm=new Vue({
      el:"#app",
      data:{
        products:[],
        productModel:{
          id:0,
          title:'',
          price:0,
          description:'',
          qty:0,
        },
        isAdd:true,
      },
      created(){
        this.getAll() 
      },
      methods:{
        getAll(){
          $.getJSON('http://localhost:8080/exam_be2/product/list', (data)=>{
            this.products = data
            this.products.forEach((item, index)=>{
              item.oPrice = (item.price * (1 + Math.random())).toFixed(2)
            })
            console.log(this.products);
          })
        },
        insert(){
          $.ajax({
            url:'http://localhost:8080/exam_be2/product/insert',
            type:"POST",
            contentType:"application/json",
            data:JSON.stringify(vm.productModel),
            success:(data)=>{
              if(data){
                vm.productModel={}
                vm.getAll()
              }else{
                alert("插入失敗")
              }
            }
          })
        },
        update(){
          $.ajax({ 
            url:'http://localhost:8080/exam_be2/product/update',
            type:"PUT",
            contentType:"application/json",
            data:JSON.stringify(vm.productModel),
            success:(data)=>{
                if(data){
                  vm.clear()
                  vm.getAll()
                }else{
                  alert("更新失敗！")
                }
            }
          })
        },
        clear(){
          this.productModel={}
          this.isAdd=true
        },
        save(){
          if(vm.isAdd){
            vm.insert()
          }else{
            vm.update()
          }
        },
        remove(index,p){
          if(confirm("確定刪除？")){
            $.ajax({
              url:'http://localhost:8080/exam_be2/product/delete?id=' + p.id,
              type:"DELETE",
              success:data=>{
                if(data){ 
                  this.getAll()
                }else{
                  alert("移除失败")
                }
              }
            })
          }
        },
        edit(index,p){
          this.isAdd=false
          this.productModel=JSON.parse(JSON.stringify(p))
        }
      
      },
      computed:{
        total(){
          let total=0
          this.products.forEach(item=>total+=item.qty*item.price)
          return total
        }
      }
    })
  </script>
 </body>
 </html>